<template>
  <el-dialog
    v-model="dialogVisible"
    :title="$t('system.deptPost.postChoose')"
    append-to-body
    width="80%"
  >
    <div>
      <el-row :gutter="10">
        <el-col :span="15">
          <el-form
            v-show="showSearch"
            ref="queryFormRef"
            :inline="true"
            :model="queryParams"
            label-position="left"
            @submit.prevent
          >
            <el-form-item
              :label="$t('system.position.code')"
              prop="postCode"
            >
              <el-input
                v-model="queryParams.postCode"
                :placeholder="$t('system.position.enterCode')"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item
              :label="$t('system.position.name')"
              prop="postName"
            >
              <el-input
                v-model="queryParams.postName"
                :placeholder="$t('system.position.enterName')"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                icon="ele-Search"
                type="primary"
                @click="handleQuery"
              >
                {{ $t("system.position.search") }}
              </el-button>
              <el-button
                icon="ele-Refresh"
                @click="resetQuery"
              >
                {{ $t("system.position.reset") }}
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            ref="postTableRef"
            v-loading="loading"
            :data="postList"
            row-key="id"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              align="center"
              reserve-selection
              type="selection"
              width="55"
            />
            <el-table-column
              align="center"
              label="岗位编号"
              prop="id"
            />
            <el-table-column
              :label="$t('system.position.code')"
              align="center"
              prop="postCode"
            />
            <el-table-column
              :label="$t('system.position.name')"
              align="center"
              prop="postName"
            />
            <el-table-column
              :label="$t('system.position.managerPosition')"
              align="center"
              prop="leaderPost"
              width="180"
            >
              <template #default="scope">
                <el-tag
                  v-if="scope.row.leaderPost === 1"
                  type="success"
                >
                  {{ $t("system.position.yes") }}
                </el-tag>
                <el-tag
                  v-else
                  type="danger"
                >
                  {{ $t("system.position.no") }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('system.position.createTime')"
              align="center"
              prop="createTime"
              width="180"
            >
              <template #default="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            v-model:limit="queryParams.size"
            v-model:page="queryParams.current"
            :total="total"
            @pagination="getList"
          />
        </el-col>
        <el-col :span="9">
          <p class="title-text pl5">{{ $t("form.setting.selectedPostList") }}</p>
          <el-table
            :data="selectedPostList"
            border
            class="mt10"
            max-height="500"
          >
            <template #empty>
              <el-empty :description="$t('form.setting.noSelectedPost')" />
            </template>
            <el-table-column
              label="岗位编号"
              prop="id"
            />
            <el-table-column
              :label="$t('system.position.name')"
              :show-overflow-tooltip="true"
              prop="postName"
            />
            <el-table-column
              :label="$t('form.setting.operation')"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template #default="scope">
                <el-button
                  icon="ele-Delete"
                  link
                  type="primary"
                  @click="deleteSelectedPostHandle(scope.row, scope.$index)"
                >
                  {{ $t("formI18n.all.delete") }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">
          {{ $t("formI18n.all.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="submitSelectedPostHandle"
        >
          {{ $t("formI18n.all.confirm") }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" name="PostChooseTable" setup>
import { nextTick, onMounted, reactive, ref } from "vue";
import { pagePost } from "@/api/system/organization";
import { uniqBy } from "lodash-es";
import { SysPostEntity } from "@/api/system/post";

// 定义组件属性
const emit = defineEmits(["submit"]);

// 响应式状态
const loading = ref(true);
const dialogVisible = ref(false);
const showSearch = ref(true);
const total = ref(0);
const postList = ref([]);
const selectedPostList = ref<SysPostEntity[]>([]);
const queryFormRef = ref();
const postTableRef = ref();

const queryParams = reactive({
  current: 1,
  size: 5,
  postName: undefined,
  postCode: undefined,
  status: "0"
});

// 方法定义
const showDialog = (list: any[]) => {
  dialogVisible.value = true;
  selectedPostList.value = list;
  nextTick(() => {
    handleDefaultRowSelection();
  });
};

const getList = () => {
  loading.value = true;
  pagePost(queryParams).then(response => {
    postList.value = response.data.records;
    total.value = response.data.total;
    loading.value = false;
    handleDefaultRowSelection();
  });
};

const handleSelectionChange = (selection: any[]) => {
  console.log(selection);
  selectedPostList.value = uniqBy(selectedPostList.value.concat(selection), "id");
};

const handleQuery = () => {
  queryParams.current = 1;
  getList();
};

const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

const handleDefaultRowSelection = () => {
  postTableRef.value?.clearSelection();
  if (selectedPostList.value.length == 0) {
    return;
  }
  selectedPostList.value.map(selectPost => {
    const post = postList.value.find(item => item.id == selectPost.id);
    if (post) {
      postTableRef.value?.toggleRowSelection(post, true);
    }
  });
};

const submitSelectedPostHandle = () => {
  dialogVisible.value = false;
  emit("submit", selectedPostList.value);
};

const deleteSelectedPostHandle = (row: any, index: number) => {
  selectedPostList.value.splice(index, 1);
  let post = postList.value.find((item: SysPostEntity) => item.id == row.id);
  if (post) {
    postTableRef.value?.toggleRowSelection(post, false);
  }
};

defineExpose({
  showDialog
});

onMounted(() => {
  // 初始化
  getList();
});
</script>
